<template>
  <!-- 最近更新 Begin -->
  <div class="m-b-40px">
    <div class="row-title flex flex-items-center flex-justify-center m-t-40px m-b-40px w-100%">
      <div
        class="col-title capitalize text-center text-18px text-#000 dark:text-#D8D8D8 font-700 tracking-1px"
        style="font-family: 'Open Sans', sans-serif"
      >
        Recent Post
      </div>
    </div>
    <!-- 最近更新列表 Begin -->
    <div class="w-100% flex flex-row flex-justify-center p-x-10px m-b-15px" v-if="recentList.length > 0" v-for="(item, index) in recentList" :key="item.articleId">
      <div
        class="m-r-10px pos-relative border-2px border-solid border-[--el-color-primary] w-112px h-112px p-4px rounded-full flex flex-justify-center flex-items-center"
      >
        <el-image :src="item.picture" fit="cover" class="w-100px h-100px hover:opacity-70 rounded-full transition-all duration-600 transition-ease">
          <template #error>
            <el-image :src="errorUrl" fit="contain" class="w-100% h-100%"></el-image>
          </template>
        </el-image>
        <div
          class="pos-absolute left--16px top-0px w-36px h-36px bg-[--el-color-primary] line-height-32px text-#fff text-center font-600 border-2px border-solid border-#fff rounded-full"
        >
          {{ index + 1 }}
        </div>
      </div>

      <div class="w-100%">
        <div
          class="capitalize text-18px tracking-1px m-r-10px font-700 text-[--el-color-primary]"
          style="font-family: 'Dancing Script', cursive"
        >
          {{ item.categoryName }}
        </div>
        <div
          class="gradient-title capitalize text-14px h-45px text-#222 dark:text-#D8D8D8 font-700 m-y-5px hover:text-#6E6E6E dark:hover:text-#FFF line-clamp-2 transition-all duration-600 transition-ease"
          style="font-family: 'Open Sans', sans-serif"
          @click="handleArticleContent(item.articleId)"
        >
          {{ item.articleTitle }}
        </div>
        <div class="flex text-13px text-#7E7E7E dark:text-#D8D8D8" style="font-family: 'Muli', sans-serif">
          <div>{{ item.createTime }}</div>
          <div class="m-x-5px text-[--el-color-primary] font-bold">﹣</div>
          <div>{{ getFormatToK(item.views) + ' Views' }}</div>
        </div>
      </div>
    </div>
    <!-- 最近更新列表 End -->
    <!-- 骨架屏 Begin -->
    <div v-else>
      <el-skeleton animated>
        <template #template>
          <div class="w-100% flex flex-justify-between m-b-15px">
            <el-skeleton-item variant="image" class="rounded-full w-100px h-100px m-r-10px" />
            <el-skeleton-item class="flex-1 h-100px" />
          </div>
          <div class="w-100% flex flex-justify-between m-b-15px">
            <el-skeleton-item variant="image" class="rounded-full w-100px h-100px m-r-10px" />
            <el-skeleton-item class="flex-1 h-100px" />
          </div>
          <div class="w-100% flex flex-justify-between m-b-15px">
            <el-skeleton-item variant="image" class="rounded-full w-100px h-100px m-r-10px" />
            <el-skeleton-item class="flex-1 h-100px" />
          </div>          
        </template>
      </el-skeleton>  
    </div>
    <!-- 骨架屏 End -->  
  </div>
  <!-- 最近更新 End -->
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { listRecent } from "@/api/blog/article/index.ts";
import { koiMsgWarning, koiNoticeError } from "@/utils/koi.ts";
import { getFormatToK } from "@/utils/index.ts";
import errorUrl from "@/assets/images/error/404.png";

const recentList = ref<any>([]);

/** 获取文章最近三篇数据 */
const handleRecent = async () => {
  try {
    recentList.value = [];
    const res: any = await listRecent();
    recentList.value = res.data;
  } catch (error) {
    console.log(error);
    koiNoticeError("数据查询失败，请刷新重试🌻");
  }
};

onMounted(() => {
  handleRecent();
});

/** 文章内容 */
const handleArticleContent = (articleId: any) => {
  if (articleId) {
    window.open(`/article/content/${articleId}`, "_blank");
  } else {
    koiMsgWarning("未获取文章参数，请刷新页面重试");
  }
};
</script>

<style scoped></style>
